<template>
  <view>
    <view class="container" v-for="(item,index) in buyList" :key="index">
      <tui-list-cell :hover="false">
        <view class="tui-line-cell">
          <view class="tui-title"><text class="isrequire">*</text>请选择产品</view>
          <view class="tui-box flex">
            <view class="item tippadt8">
              <picker
                mode="multiSelector"
                @change="picker($event,index)"
                @columnchange="bindMultiPickerColumnChange($event,index)"
                :value="item.multiIndex"
                :range="item.multiArray"
              >
                <view class="product">{{item.pText||'请选择'}}</view>
              </picker>
            </view>
            <view @click="removeProduct($event,index)">
              <uni-icons type="minus-filled" color="#007aff" size="18"></uni-icons>
            </view>
          </view>
        </view>
      </tui-list-cell>
      <tui-list-cell :hover="false">
        <view class="tui-line-cell">
          <view class="tui-title"><text class="isrequire">*</text>数量</view>
          <uni-number-box class="tui-input" :value="item.pCount" @change="change($event,index)" />
        </view>
      </tui-list-cell>
      <tui-list-cell :hover="false">
        <view class="tui-title">备注</view>
        <view >
          <textarea auto-height class="tui-input" :value="item.remark" @input="remarkInput($event,index)" placeholder="备注信息" />
        </view>
      </tui-list-cell>
    </view>
   
  </view>
</template>

<script>
import { getProductList } from "@/pages/work/interface.js";
export default {
  created() {
    this.getProductLists();
  },
  data() {
    return {
      selectList: [],
      buyList: [
        {
          pId: '',
          pCount: 0,
          pText:'',
          remark:'',
          multiIndex: [0, 0],
          multiArray: []
        }
      ],
      defaultBuyDetail: {
        pId: '',
        pText:'',
        pCount: 0,
        remark:'',
        multiIndex: [0, 0],
        multiArray: []
      }
    };
  },
  methods: {
    bindMultiPickerColumnChange: function(e,index) {
      // console.log(
      //   "修改的列为：" + e.detail.column + "，值为：" + e.detail.value+"  index:"+index
      // );
      //第几列 下标从0开始
      let column = e.detail.column;
      //第几行 下标从0开始
      let value = e.detail.value;
      let that = this.buyList[index];
      switch (column) {
        case 0:
          that.multiArray = [
            that.multiArray[0],
            this.toArr(this.selectList[value].children)
          ];
          that.multiIndex = [value, 0];
          break;
        case 1:
          that.multiIndex[1] = value;
          break;
        default:
          break;
      }
    },
    picker: function(e,index) {
      // console.log(e);
      let that = this.buyList[index];
      let value = e.detail.value;
      if (this.selectList.length > 0) {
        let provice = this.selectList[value[0]].label;
        let city = this.selectList[value[0]].children[value[1]].label;
        that.pText = provice + " " + city;
        that.pId = this.selectList[value[0]].children[value[1]].id;
        
      }
    },
    remarkInput(e,index){
      // console.log('e:',e,index);
      let that = this.buyList[index];
      that.remark = e.detail.value;
      this.$emit("onChange", this.buyList);
    },
    async getProductLists() {
      let Res = await getProductList();
      // console.log("Res:", Res);
      if (Res && Res.success) {
        this.selectList = Res.result;

        this.defaultBuyDetail.multiArray = [
          this.toArr(this.selectList),
          this.toArr(this.selectList[0].children)
        ];
        
        this.initDefaultShowData();

        
      } else {
        uni.showToast({
          icon: "none",
          title: Res.message || "数据获取失败~！"
        });
      }
    },
    //如果初始值不为空，初始化选择列表
    initDefaultShowData(){
      
      if(this.buyList.length){
        this.buyList.map(item=>{
          item.multiArray = JSON.parse(JSON.stringify(this.defaultBuyDetail.multiArray));
        })
      }
      
      
    },
    toArr(object) {
      let arr = [];
      for (let i in object) {
        arr.push(object[i].label);
      }
      return arr;
    },
    change(value,index) {
      // console.log(value);
      let that = this.buyList[index];
      if(!that.pId){
        uni.showToast({
          icon:"none",
          title:"请先选择产品！"
        })
        
      }
      that.pCount = value;
      this.$emit("onChange", this.buyList);
    },
    //添加产品
    addProduct() {
      this.buyList.push(JSON.parse(JSON.stringify(this.defaultBuyDetail)));
    },
    removeProduct(evt, index) {
      this.buyList.splice(index, 1);
      this.$emit("onChange", this.buyList);
    }
  }
};
</script>

<style lang="scss">
.container {
  padding: 0 0 20rpx 0;
}
.tui-line-cell {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.tui-title {
  min-width: 100upx;
  line-height: 32rpx;
  flex-shrink: 0;
}

.tui-input {
  font-size: 32rpx;
  color: #333;
  padding-left: 20rpx;
  flex: 1;
}
.pad10 {
  padding: 10px;
}
.tui-box {
  flex: 1;
}
.product {
  padding-left: 10px;
  font-size: 30rpx;
  line-height: 32rpx;
  flex: 1;
}
.flex {
  display: flex;
  .item {
    flex: 1;
  }
}
.isrequire{
  color: #d41200;
}
.tippadt8{
  padding-top: 20upx;
}
.tui-input {
  font-size: 32rpx;
  color: #333;
  padding-left: 20rpx;
  flex: 1;
}
</style>